import React, { PureComponent } from "react";
import { connect } from "dva";
import { Button } from "antd";
import moment from "moment";
import Link from "umi/link";
import cn from "classnames";
// import FooterView from "components/footer/BottomFooter";
import WeekCalendar from "components/calendar/WeekCalendar";
import styles from "./index.less";

@connect(
  ({ weekdaysManagement: { workingDayList, specialDay, selectedYear } }) => ({
    workingDayList,
    specialDay,
    selectedYear,
  }),
)
class WeekdaysManagement extends PureComponent {
  componentDidMount() {
    this.getData();
  }

  getData = (date) => {
    const { dispatch } = this.props;
    dispatch({
      type: "weekdaysManagement/getWorkingDayList",
    });
    dispatch({
      type: "weekdaysManagement/getOffDayList",
      queryMoment: date,
    });
  };

  handleCalendarChange = (date) => {
    this.getData(date);
  };

  renderPop = (value) => {
    const { workingDayList = [], specialDay = {} } = this.props;
    const date = value.format("YYYY-MM-DD");
    const week = value.format("ddd");
    const dateDetail = specialDay[date];
    const dateWork = workingDayList.find((item) => item.name === week);
    return (
      <div>
        {dateDetail == null ? (
          <div className={cn(styles.detail, { [styles.offDay]: !dateWork })} />
        ) : (
          <div className={cn(styles.special, { [styles.offDay]: !dateWork })}>
            {dateDetail.type === "OFF_DAY" ? (
              <div className={styles.tag}>休</div>
            ) : (
              <div className={styles.tag} style={{ background: "#f65858" }}>
                班
              </div>
            )}
            <div className={styles.desc}>{dateDetail.remark}</div>
          </div>
        )}
      </div>
    );
  };

  render() {
    const { selectedYear } = this.props;
    return (
      <>
        <div
          className={styles.root}
          style={{ minHeight: window.innerHeight - 64 - 16 - 16 - 104 }}
        >
          <Link to="/systemmanagement/weekdaysmanagement/setweekdays">
            <Button type="primary">工作日设置</Button>
          </Link>
          <WeekCalendar
            value={moment(selectedYear)}
            dateCellRender={this.renderPop}
            onPanelChange={this.handleCalendarChange}
          />
        </div>
        {/* <FooterView /> */}
      </>
    );
  }
}

export default WeekdaysManagement;
